<!--
 * @Description: 日历视图
 * @Author: wws1993
 * @Date: 2020-11-30 10:14:22
 * @LastEditTime: 2020-12-14 11:16:38
 * @LastEditors: wws1993
 * @FilePath: \TODO-MANAGER\src\components\CalendarViewModule\index.vue
-->

<template>
  <el-dialog class="CalendarView" :visible="visible" @close="toggle" :show-close="false" append-to-body>
    <section class="CalendarView-header" slot="title">
      <span>
        <el-button :type="theme" plain icon="el-icon-arrow-left" @click="handlePrev"></el-button>
        <el-button :type="theme" plain icon="el-icon-arrow-right" @click="handleNext"></el-button>
      </span>

      <span class="CalendarView-header-title">{{currentDate}}</span>

      <span>
        <el-button :type="theme" :plain="mode !== 'month'" @click="changeMode('month')">月</el-button>
        <el-button :type="theme" :plain="mode !== 'week'" @click="changeMode('week')">周</el-button>
        <el-button :type="theme" :plain="mode !== 'date'" @click="changeMode('date')">日</el-button>
      </span>
    </section>
    <!-- 过滤图标 -->
    <div class="CalendarView-filter-icon" :class="{active: filterVisible}" @click="toggleFilterVisible">
      <i :class="!filterVisible ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
    </div>
    <!-- 图标end -->
    <div class="CalendarView-filter-view" :class="{active: filterVisible}">
      <el-form ref="form" :model="calendarFilter" label-position="top">
        <el-form-item label="待办主题">
          <el-input v-model="calendarFilter.subject" placeholder="这儿写主题" ref="autoFocus"></el-input>
        </el-form-item>
        <el-form-item label="紧急程度">
          <el-radio v-model="calendarFilter.weight" :label="1">高</el-radio>
          <el-radio v-model="calendarFilter.weight" :label="2">中</el-radio>
          <el-radio v-model="calendarFilter.weight" :label="3">低</el-radio>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="calendarFilter.startTime" type="datetime" placeholder="选择日期时间" :clearable="false"/>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="calendarFilter.endTime" type="datetime" placeholder="选择日期时间" :clearable="false"/>
        </el-form-item>
        <el-form-item label="联系人">
          <el-select
            v-model="calendarFilter.person"
            multiple
            filterable placeholder="请选择联系人"
            >
            <el-option
              v-for="item in mailList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="CalendarView-filter-view-footer">
        <el-button type="info" size="mini" @click="clearCalendarFilter" plain>重置筛选</el-button>
        <el-button :type="theme" size="mini" @click="confirmCalendarFilter" plain>确定</el-button>
      </div>
    </div>
    <!-- 日历 -->
    <div class="CalendarView-context" ref="CalendarView">
      <div class="CalendarView-context-container">
        <viewMonth :data="calendarContext" v-if="mode === 'month'"/>
        <viewWeek :data="calendarContext" v-if="mode === 'week'"/>
        <viewDate :data="calendarContext" v-if="mode === 'date'"/>
      </div>
      <base-loading :visible="loading"></base-loading>
    </div>
    <!-- 日历 end -->
  </el-dialog>
</template>

<script lang="ts">
import Vue from 'vue';
import imgs from '@/lib/img';
import viewMonth from './viewMonth.vue';
import viewWeek from './viewWeek.vue';
import viewDate from './viewDate.vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { mapMutations, mapState, mapActions } from 'vuex';

@Component({
  components: {viewMonth, viewWeek, viewDate},
  computed: {
    ...mapState({
      theme:              (state: any) => state.theme,
      todoManagerVisible: (state: any) => state.manage.visible,
      visible:            (state: any) => state.CalendarViewModule.visible,
      mode:               (state: any) => state.CalendarViewModule.mode,
      current:            (state: any) => state.CalendarViewModule.current,
      loading:            (state: any) => state.CalendarViewModule.loading,
      mailList:           (state: any) => state.MailListModule.data,
      filterVisible:      (state: any) => state.CalendarViewModule.filterVisible,
      calendarFilter:     (state: any) => state.CalendarViewModule.filter,
      calendarContext:    (state: any) => state.CalendarViewModule.calendarContext,
    }),
  },
  methods: {
    ...mapMutations({
      toggle: 'CalendarViewModule/toggleVisible',
      toggleFilterVisible: 'CalendarViewModule/toggleFilterVisible',
    }),
    ...mapActions({
      handleNext: 'CalendarViewModule/handleNext',
      handlePrev: 'CalendarViewModule/handlePrev',
      changeMode: 'CalendarViewModule/changeMode',
    }),
    clearCalendarFilter() {
      this.$store.commit('CalendarViewModule/clearCalendarFilter');
      // this.toggleFilterVisible();
      this.$store.dispatch('CalendarViewModule/render');
    },
    confirmCalendarFilter() {
      this.$store.dispatch('CalendarViewModule/render');
    },
  },
})
export default class CalendarView extends Vue {
  private imgs: any = imgs;
  get currentDate() {
    let str = '';

    switch (this.mode) {
      case 'month':
        str = this.current.format('yyyy年MM月');
        break;
      case 'week':
        str = this.current.format('yyyy年MM月ww周');
        break;
      case 'date':
        str = this.current.format('yyyy年MM月dd日');
        break;
      default:
        break;
    }

    return str;
  }

  @Watch('visible')
  private handleToggleVisible(state: boolean) {
    if (state) {
      this.$store.dispatch('CalendarViewModule/render');
    }
  }

  @Watch('todoManagerVisible')
  private handleTodoManagerVisible(state: boolean) {
    if (!state) {
      this.$store.dispatch('CalendarViewModule/render');
    }
  }
}
</script>

<style lang="scss">
.CalendarView{
  .el-dialog{margin-top:0 !important; width:1000px; top:50%; transform:translateY(-50%);}
  .el-dialog__body{padding:20px;}

  &-header{display:flex; justify-content:space-between; background:#fff;
    span{flex:1; white-space:nowrap;}
    &-title{flex:5 !important; margin:0 12px; text-align:center; font-size:18px; font-weight:bold;}
  }
  &-context{height:80vh; position:relative; background:#fff; font-size:1.2em;
    &-container{position:absolute; top:0; left:0; right:0; bottom:0; padding-top:40px;
      $border:1px solid #efefef;
      &-header{height:40px; position:absolute; top:0; left:0; right:0;
        span{display:inline-block; width:14.28%; text-align:center; border-top:$border; border-right:$border; line-height:40px;}
        span:first-child{border-left:$border;}
      }
      &-body{height:100%; background:#ecf5ff;
        .month-days{width:14.28%; height:16.66%; float:left; border:$border; text-align:right; padding:2em 5px 5px; position:relative;
          .day{position:absolute; right:5px; top:5px;
            &-todos{overflow-y:auto; height:100%; padding-right:2px;
              &::-webkit-scrollbar{width:5px;}
              &::-webkit-scrollbar-thumb{width:5px; background:#000;}
            }
          }
        }
        .month-placeholder{background:#f7fafd;
          .todo{filter:opacity(.6);}
        }
        .month-today::before{content:'今'; width:1.5em; height:1.5em; border-radius:50%; display:block;
          background:#f8e993; line-height:1.5em; text-align:center; font-size:12px;
          position:absolute; top:5px; left:5px;
        }

        .todo{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
          width:100%; display:block;
          padding:0 5px; margin-bottom:3px;
          &.close{border-radius:10px;}
          &.close-left{border-top-left-radius:10px; border-bottom-left-radius:10px;}
          &.close-right{border-top-right-radius:10px; border-bottom-right-radius:10px;}
          &-more{font-size:.9em; color:#999; cursor:pointer;
            &:hover{color:#333;}
          }

          &[data-weight='3']{background:#a6d7a8;}
          &[data-weight='2']{background:#90cbf9;}
          &[data-weight='1']{background:#faa19b;}
        }
        .hidden{opacity:.4;}
      }
    }
  }

  &-filter{
    &-icon{
      transition:.2s;
      width:20px; height:40px; font-size:16px; color:#fff;;
      display:flex; justify-content:center; align-items:center; cursor:pointer;
      border-top-right-radius:10px; border-bottom-right-radius:10px;
      position:absolute; right:-20px; top:120px; background:#90cbf9;
      &.active{transform:translateX(220px);}
    }
    &-view{
      transition:.2s; position:absolute; overflow:auto; background:#fff;
      border-left:1px solid #efefef; border-top-right-radius:5px; border-bottom-right-radius:5px;
      width:220px; bottom:20px; top:80px; right:0; padding:10px 20px 50px 10px;
      &.active{transform:translateX(220px); padding-right:10px;}
      .el-input{width:100% !important}

      &-footer{position:absolute; bottom:0; left:0; right:0; padding:10px 20px;
        display:flex; justify-content:space-between;
      }
    }
  }
}
</style>
